<template>
<div title="录像时段 单击选择或取消 单击不放滑动可快速选择 单击标题可反选行或列 蓝色表示保留 灰色表示删除" style="-moz-user-select:none;-webkit-user-select:none;user-select:none;overflow-x:auto;overflow-y:hidden;">
  <span style="color:lightgrey;font-style:italic;line-height:24px;">录像时段  蓝色表示保留 灰色表示删除 单击选择或取消 单击不放滑动可快速选择 单击标题可反选行或列</span>
  <div class="plans">
    <div class="plan-row-header">
      <div class="plan-day plan-header" @click.prevent="refresh()" style="cursor:pointer;"><i class="fa fa-refresh"  title="点击还原"></i>&nbsp;{{channel ? channel+'号通道':'批量配置'}}</div>
      <div class="plan-hours">
        <div v-for="hour in 24" :key="hour" @click="tilteclick(true,hour)" title="单击反选该列" class="plan-hour plan-header">
          {{hour-1}}时
        </div>
      </div>
    </div>
    <div v-for="day in days" :key="day" class="plan-row">
      <div class="plan-day" @click.prevent="tilteclick(false,days.indexOf(day))" title="单击反选该行">星期{{day}}</div>
      <div class="plan-hours">
        <div v-for="hour in 24" :key="hour" class="plan-hour">
          <div class="plan-hour-half" @mousedown.stop="mousedown(days.indexOf(day),hour*2-1)" @mouseup.stop="mouseup(days.indexOf(day),hour*2-1)" @mouseover.stop="check(days.indexOf(day),hour*2-1,false,true)" :id="'hour-'+((days.indexOf(day)*48+(hour*2-1))-1)" title="蓝色表示保留前半小时录像"></div>
          <div class="plan-hour-half" @mousedown.stop="mousedown(days.indexOf(day),hour*2)" @mouseup.stop="mouseup(days.indexOf(day),hour*2)" @mouseover.stop="check(days.indexOf(day),hour*2,false,true)" :id="'hour-'+((days.indexOf(day)*48+(hour*2))-1)" title="蓝色表示保留后半小时录像"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      days: ["一", "二", "三", "四", "五", "六", "日"],
      checks: [],
      isclick: false,
      recordPlan: "",
      channel:1,
    }
  },
  methods: {
    refresh() {
      this.$confirm(`恢复初始配置，当前的编辑会丢失，是否继续?`, "提示").then(() => {
        this.init(undefined,this.channel);
      }).catch(() => {});
    },
    init(recordPlan,channel) {
      this.channel = channel;
      this.checks = [];
      if (recordPlan != undefined) {
        this.recordPlan = recordPlan + "";
      }
      if (this.recordPlan == "") {
        for (var i = 0; i < 336; i++) {
          this.checks[i] = 1;
          this.checkIndex(i);
        }
      } else {
        var plans = this.recordPlan.split("");
        this.checks = plans;
        for (var i = 0; i < 336; i++) {
          this.checkIndex(i);
        }
        // console.log(this.checks);
      }
    },
    getChecks() {
      return this.checks.join("");
    },
    tilteclick(iscol, index) {
      if (iscol) {
        for (var i = 0; i < 7; i++) {
          this.check(i, index * 2 - 1, true, true);
          this.check(i, index * 2, true, true);
        }
      } else {
        for (var i = 1; i <= 24; i++) {
          this.check(index, i * 2 - 1, true, true);
          this.check(index, i * 2, true, true);
        }
      }
    },
    mousedown(day, hour) {
      this.isclick = true;
      this.check(day, hour, false, true);
    },
    mouseup(day, hour) {
      this.isclick = false;
      this.check(day, hour, false, true);
    },
    check(day, hour, ignoreClick, invert) {
      if (this.isclick || ignoreClick) {
        var index = (day * 48 + hour) - 1;
        var dayStr = this.days[day];
        var hourNum = Math.floor((hour - 1) / 2);
        if ((invert && this.checks[index] == 1) || (!invert && this.checks[index] == 0)) {
          this.checks[index] = 0;
          $("#hour-" + index).attr("class", "plan-hour-half-no");
          if (index % 2 == 0) {
            $("#hour-" + index).attr("title", "灰色表示删除(星期" + dayStr + " " + hourNum + ":00-" + hourNum + ":30)录像");
          } else {
            $("#hour-" + index).attr("title", "灰色表示删除(星期" + dayStr + " " + hourNum + ":30-" + (hourNum + 1) + ":00)录像");
          }
        } else {
          this.checks[index] = 1;
          $("#hour-" + index).attr("class", "plan-hour-half");
          if (index % 2 == 0) {
            $("#hour-" + index).attr("title", "蓝色表示保留(星期" + dayStr + " " + hourNum + ":00-" + hourNum + ":30)录像");
          } else {
            $("#hour-" + index).attr("title", "蓝色表示保留(星期" + dayStr + " " + hourNum + ":30-" + (hourNum + 1) + ":00)录像");
          }
        }
      }
    },
    checkIndex(index) {
      var day = Math.floor(index / 48);
      var hour = index + 1 - day * 48;
      this.check(day, hour, true, false);
    }
  },
}
</script>

<style lang="less" scoped>
.plans {
  font-size: 12px;
  text-align: center;
  border: 0;
  width: 100%;
  min-width: 869px;
  margin: auto;
}

.plan-header {
  font-weight: bold;
  height: 24px !important;
  color: #eee;
  background-color: #1a5283 !important;
  line-height: 24px !important;
}

.plan-header:hover {
  background-color: lighten(#1a5283, 4%) !important;
}

.plan-row-header {
  height: 24px;
  width: 100%;
}

.plan-row {
  height: 60px;
  width: 100%;
  border-top: 1px;
  border-style: solid none none none;
  border-color: #eee;
}

.plan-day {
  width: 8%;
  height: 100%;
  float: left;
  background-color: lighten(#1a5283, 5%);
  color: #eee;
  line-height: 60px;
}

.plan-day:hover {
  background-color: lighten(#1a5283, 10%);
}

.plan-hours {
  width: 92%;
  height: 100%;
  float: left;
}

.plan-hour {
  height: 100%;
  width: 4.166%;
  float: left;
  font-size: 12px;
  border-color: #eee;
  border-style: none none none solid;
  border-left-width: 1px;
}

.plan-hour-half {
  width: 100%;
  height: 50%;
  background-color: #00c0ef;
  font-size: 10px;
  line-height: 30px;
  cursor: pointer;
}

.plan-hour-half-no {
  width: 100%;
  height: 50%;
  background-color: #ddd;
  font-size: 10px;
  line-height: 30px;
  cursor: pointer;
}

.plan-hour-half-no:hover {
  background-color: lighten(#ddd, 10%);
}

.plan-hour-half:hover {
  background-color: lighten(#00c0ef, 10%);
}
</style>
